<template>
  <div class="coupon-label">
    <span>领券</span>
    <span>{{ thresholdAmount }}减{{ amount }}</span>
  </div>
</template>

<script>
export default {
  name: 'couponLabel',
  props: {
    thresholdAmount: [String, Number],
    amount: [String, Number]
  }
};
</script>

<style lang="scss" scoped>
.coupon-label {
  padding: 0;
  border: 1px solid #f5a7a7;
  border-radius: 0;
  color: #e62525;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: #fff;
  box-sizing: border-box;
  line-height: normal;

  &:before {
    position: absolute;
    content: '';
    width: 3px;
    height: 6px;
    left: -1px;
    background-color: #fff;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border: 1px solid #f5a7a7;
    border-left: 0;
    box-sizing: border-box;
  }
  &:after {
    position: absolute;
    content: '';
    right: -1px;
    width: 3px;
    height: 6px;
    background-color: #fff;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border: 1px solid #f5a7a7;
    border-right: 0;
    box-sizing: border-box;
  }

  span:first-child {
    background: #fff1f1;
    padding-left: 6px;
    padding-right: 3px;
  }
  span:last-child {
    padding-left: 3px;
    padding-right: 6px;
  }
}
</style>
